<template>
	<view class="">
		<view class="u-flex u-p-t-20 page-wrap">
			<div class="left">
				<div class="u-font-34 blod u-p-l-30 u-p-b-20 u-p-t-10">职务</div>
				<scroll-view scroll-y class="list">
					<text @click="changeCurrent(index)" :class="['u-line-1',{active:current==index}]" v-for="(item,index) in list" :key="index">{{item.title}}</text>
				</scroll-view>
			</div>
			<scroll-view scroll-y class="right">
				<div class="wrap">
					<text :class="{active:isSelected(item.title)}" @click="addZW(index)" v-for="(item,index) in listChildren" :key="index">{{item.title}}</text>
				</div>
			</scroll-view>
			
		</view>
		<view class="btn-trace" @click="confirm">确定</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		computed: {},
		data() {
			return {

				selected: [],
				current: 0,
				list: [
					
				],
				listChildren:[],

			}
		},
		onLoad() {
			// 职位列表
			this.get_recruit_jobCategory();
		},
		methods: {
			//确定
			confirm(){
				uni.navigateTo({
					url:`/pages/recruit/job/fbjl?selected=${JSON.stringify(this.selected)}`
				})
			},
			
			// 
			changeCurrent(index){
				this.current=index
				this.listChildren=this.list[this.current].children
				if(this.listChildren.length == 0){
					uni.showToast({
						icon:'none',
						title:"暂无",
						duration:2000
					})
				}
			},
			addZW(index) {
				let item = this.list[this.current].children[index]
				let itemIndex = this.selected.findIndex(i => {
					return i.title == item.title
				})
				if (itemIndex == -1) {
					this.selected.push(item)
				} else {
					this.selected.splice(itemIndex, 1)
				}
				this.isSelected(item.title)
			},
			isSelected(title) {
				let item = this.selected.find(i => {
					return i.title == title
				})
				return item ? true : false
			},

			// 职位列表
			get_recruit_jobCategory() {
				this.$http({
					url: this.api.recruit_jobCategory,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data;
						this.changeCurrent(this.current)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.btn-trace {
		position: fixed;
		bottom: 60rpx;
		left: 45rpx;
		width: 660rpx;
		height: 100rpx;
		background: #07C160;
		border-radius: 15rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
	.page-wrap {
		height: 100vh;
		align-items: stretch;
	}

	.left {
		.list {
			height: calc(100vh - 100rpx);
		}

		text {
			display: block;
			width: 220rpx;
			height: 66rpx;
			font-size: 24rpx;
			line-height: 66rpx;
			padding: 0 25rpx;
			margin-top: 10rpx;
		}

		text.active {
			background: #FFFFFF;
			color: #07C160
		}
	}

	.right {
		min-height: 100%;
		background: #fff;

		.wrap {
			height: 100%;
			flex: 1;
			width: 100%;

			display: grid;
			grid-template-columns: repeat(auto-fill, 150rpx);
			grid-template-rows: repeat(auto-fill, 80rpx);
			gap: 30rpx 20rpx;
			padding: 20rpx;
		}

		text {
			width: 150rpx;
			height: 80rpx;
			background: #F3F3F3;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 16rpx;
			font-size: 24rpx;
			color: #999;
		}

		text.active {
			background: #E6F8EE;
			color: #07C160;
		}
	}
</style>

<style>
	page {
		padding: 0;

	}
</style>